<template>
  <div>
    <Drawer
      title="新建上线单"
      :value="showModal"
      width="720"
      :mask-closable="false"
      :styles="styles"
      @on-close="changeVisible(false)"
    >
      <Form :model="deploy" ref="form" :rules="ruleCustom">
        <Row :gutter="32">
          <Col span="18">
            <FormItem label="项目名称">
              <label>
                <Input v-model="formData.name" readonly/>
              </label>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="18">
            <FormItem label="发布环境">
              <label>
                <Input v-model="formData.level" readonly/>
              </label>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="18">
            <FormItem label="上线单标题" prop="title">
              <label>
                <Input v-model="deploy.title" placeholder="请填写上线单标题"/>
              </label>
            </FormItem>
          </Col>
        </Row>
        <div v-if="this.formData.repo_mode==='branch'">
          <Row :gutter="32">
            <Col span="18">
              <FormItem label="选择Branch" prop="branch">
                <label>
                  <Select v-model="deploy.branch"
                          placeholder="请选择上线Branch"
                          filterable
                          clearable
                          transfer
                          @on-change="handleSelectVersion">
                    <Option v-for="(item,index) in branch" :key="index" :value="item.id">{{item.id}}</Option>
                  </Select>
                </label>
              </FormItem>
            </Col>
            <Col span="1" style="margin-top: 31px;margin-left: -25px">
              <label>
                <a href="javascript:void(0)" @click="handleFlashBranch">
                  <img :src="flashSrc" alt="" class="flash animation" v-if="getBranch">
                  <img :src="flashStaticSrc" alt="" class="flash" v-else>
                </a>
              </label>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="18">
              <FormItem label="选择版本" prop="version">
                <label>
                  <Select v-model="deploy.version"
                          placeholder="请选择上线版本"
                          filterable
                          clearable
                          transfer>
                    <Option v-for="(item,index) in version" :key="index" :value="item.id">{{item.message}}</Option>
                  </Select>
                </label>
              </FormItem>
            </Col>
          </Row>
        </div>
        <div v-else>
          <Row :gutter="32">
            <Col span="18">
              <FormItem label="选择版本号" prop="version">
                <label>
                  <Select v-model="deploy.version"
                          placeholder="选择版本号"
                          filterable
                          clearable
                          transfer
                          @on-change="handleSelectVersion">
                    <Option v-for="(item,index) in branch" :key="index" :value="item.id">{{item.id}}</Option>
                  </Select>
                </label>
              </FormItem>
            </Col>
            <Col span="1" style="margin-top: 31px;margin-left: -25px">
              <label>
                <a href="javascript:void(0)" @click="handleFlashBranch">
                  <img :src="flashSrc" alt="" class="flash animation" v-if="getBranch">
                  <img :src="flashStaticSrc" alt="" class="flash" v-else>
                </a>
              </label>
            </Col>
          </Row>
        </div>
        <Row :gutter="32">
          <Col span="18">
            <FormItem label="灰度发布">
              <i-switch v-model="open_gray_push">
                <span slot="open">开</span>
                <span slot="close">关</span>
              </i-switch>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="18">
            <FormItem label="发布类型">
              <RadioGroup v-model="deploy_type" @on-change="handleDeployType">
                <Radio label="全量发布"/>
                <Radio label="指定文件"/>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="18" v-if="deploy_type_file">
            <FormItem label="文件列表">
              <label>
                <Input type="textarea" v-model="deploy.file_list" :rows="4" :placeholder="placeholder"/>
              </label>
            </FormItem>
          </Col>
        </Row>
        <div class="deploy-drawer-footer">
          <Button style="margin-right: 8px" @click="changeVisible(false)">取消</Button>
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
        </div>
      </Form>
    </Drawer>
  </div>
</template>

<script>
  import flash from '@/assets/flash.png'
  import flashStatic from '@/assets/flash_static.png'
  import Bus from '@/bus'
  import {branch, version, addTask, tag} from '@/api/task'

  export default {
    name: 'submit',
    props: {
      showModal: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: true
      },
      formData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        open_gray_push: false,
        deploy_type: '全量发布',
        deploy_type_file: false,
        placeholder: 'index.php\n' + 'README.md\n' + 'dir_name\n' + 'file*',
        deploy: {
          title: '',
          branch: 'master',
          commit_id: '',
          file_list: '',
        },
        flashSrc: flash,
        flashStaticSrc: flashStatic,
        getBranch: false,
        branch: [],
        version: [],
        ruleCustom: {
          title: [
            {required: true, message: '请填写上线标题', trigger: 'blur'}
          ],
          branch: [
            {required: true, message: '请选择分支', trigger: 'change', type: 'string'},
          ],
          version: [
            {required: true, message: '请选择版本号', trigger: 'change', type: 'string'},
          ],
        }
      }
    },
    methods: {
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          let task = {
            project_id: this.formData.id,
            title: this.deploy.title,
            branch: this.deploy.branch,
            commit_id: this.deploy.version,
            file_transmission_mode: this.deploy_type_file ? 2 : 1,
            file_list: this.deploy.file_list,
            gray_push: this.open_gray_push ? 1 : 0,
          }
          if (valid) {
            addTask(task).then(res => {
              this.$Message.success(res.message)
              this.changeVisible(false)
              Bus.$emit('handelFlashDeployList')
              this.$router.push('/deploy/list')
            })
          } else {
            return false
          }
        })
      },
      changeVisible: function (val) {
        this.deploy_type = '全量发布'
        this.$refs['form'].resetFields()
        this.$emit('changeVisible', val)
      },
      handleDeployType: function (val) {
        this.deploy_type_file = val === '指定文件'
      },
      handleFlashBranch: function () {
        this.getBranch = !this.getBranch
        if (this.formData.repo_mode === 'branch') {
          branch({id: this.formData.id})
            .then(res => {
              console.log('branch', res.data)
              this.getBranch = false
              this.branch = res.data
              this.deploy.branch = this.branch[0]['id'] || ''
              this.handleSelectVersion(this.deploy.branch)
            }).catch(error => {
            console.log(error)
            this.getBranch = false
          })
        } else {
          tag({id: this.formData.id})
            .then(res => {
              console.log('tag', res.data)
              this.getBranch = false
              this.branch = res.data
            }).catch(error => {
            console.log(error)
            this.getBranch = false
          })
        }
      },
      handleSelectVersion: function (value) {
        if (value) {
          version({id: this.formData.id, branch: value}).then(res => {
            console.log('version', res.data)
            this.version = res.data
          })
        }
      },
    }
  }
</script>

<style scoped>
  .deploy-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }

  .flash {
    margin-top: 8px;
    margin-left: -2px;
    width: 20px;
    height: 20px;
  }

  .animation {
    animation: rotation 2500ms infinite linear;
  }

  @keyframes rotation {
    from {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(360deg)
    }
  }
</style>
